<template>
  <div id="form-making">
    <fm-making-form preview ref="formMaking">
      <template slot="action">
        <div style="float:left"><el-button type="primary" size="small" @click="getJson">添加</el-button></div>
        <el-dialog title="添加按钮" :visible.sync="addFormDialog" class="dialog-form-making">
          <el-form :model="form" :rules="formRules" ref="form" label-width="120px">
            <el-form-item label="表单名称" :label-width="addButtonformLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="表单Key" :label-width="addButtonformLabelWidth" prop="formKey">
              <el-input v-model="form.formKey" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button @click="addFormDialog = false">取 消</el-button>
          <el-button type="primary" @click="addForm('form')">确 定</el-button>
        </div>
      </el-dialog>
      </template>
    </fm-making-form>
  </div>
</template>

<script type="text/javascript">
// import { MakingForm } from "form-making";
export default {
  // components: {
		// MakingForm,
  // },
  data() {
    return {
      form:{
        name:"",
        formKey:"",
      },
      addFormDialog:false,
      addButtonformLabelWidth:"120px",
      formRules: {
        name: [
          { required: true, message: '请输入表单名称', trigger: 'blur' },
        ],
        formKey: [
          { required: true, message: '请输入表单Key', trigger: 'blur' },
        ]
      },
      defaultProps:{
        children: "items",
        label: "name"
      }
    }
  },
  mounted(){

  },
  methods: {
    getJson(){
      // console.log(this.$refs.formMaking.getJSON())
      this.addFormDialog = true;
      this.json = JSON.stringify(this.$refs.formMaking.getJSON());
    },
    addForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log("===SUCCESS===");
            this.http.post("/api/form/save",{
              name: this.form.name,
              json:this.json,
              formKey: this.form.formKey
            })
            .then(res => {
              console.log(res);
              if(res.data.code === 200){
                this.$message.success(res.data.msg);
                this.addFormDialog = false;
                this.$router.go(-1);
              }
              else{
                this.$message.error(res.data.msg)
              }
            })
            .catch(err => {
              this.$message.error(res.data.msg);
            })
            // console.log(this.$router.history);
          }
      })
    },
    handleNodeClick(data){
      console.log(1)
    }
  }
}
</script>

<style lang="scss">
  #form-making{
    height: 100%;
    .dialog-form-making{
      .el-dialog__title{
        float: left;
      }
    }
  }

</style>
